<template>
  <ComponentContainerProperty v-model="formData.style">
    <el-form label-width="80px" :model="formData">
      <el-form-item label="显示标题" prop="showTxt">
          <el-switch v-model="formData.showTxt" />
        </el-form-item>
      <el-form-item label="标题" prop="txt">
          <InputWithColor v-model="formData.txt" v-model:color="formData.txtColor" />
        </el-form-item>
        <!-- <el-form-item label="开始时间" prop="startTime">
          <el-time-picker
            v-model="formData.startTime"
            value-format="HH:mm:ss"
            placeholder="选择开始时间点"
          />
        </el-form-item> -->
        <el-form-item label="结束时间" prop="startTime">
          <el-time-picker
            v-model="formData.endTime"
            value-format="HH:mm:ss"
            placeholder="选择开始时间点"
          />
        </el-form-item>
    <el-form-item label="左右内距" prop="txtPadding">
      <el-slider v-model="formData.txtPadding" :max="150" :min="10" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="标题高度" prop="txtHeight">
          <el-slider v-model="formData.txtHeight" :max="250" :min="10" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="标题大小" prop="txtFontSize">
          <el-slider v-model="formData.txtFontSize" :max="50" :min="10" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="左右内距" prop="txtPadding">
      <el-slider v-model="formData.txtPadding" :max="150" :min="10" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="秒杀大小" prop="skillFontSize">
          <el-slider v-model="formData.skillFontSize" :max="250" :min="10" show-input input-size="small" />
        </el-form-item>
        <el-form-item label="秒杀加粗" prop="skillWeight">
          <el-switch v-model="formData.skillWeight" />
        </el-form-item>
        <el-form-item label="秒杀颜色" prop="skillTxtColor">
          <ColorInput v-model="formData.skillTxtColor" />
        </el-form-item>
    </el-form>
  </ComponentContainerProperty>
</template>

<script setup lang="ts">
import { SeckillProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'

// 图片展示属性面板
defineOptions({ name: 'SeckillProperty' })

const props = defineProps<{ modelValue: SeckillProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>

<style scoped lang="scss"></style>
